// 定义外边距的大小和对应的类名
$margin-sizes: (
   "0": 0rpx,
	"xs": 10rpx,
	"sm": 20rpx,
	"md": 30rpx,
	"lg": 40rpx,
	"xl": 50rpx
);

.margin{
  margin:30rpx;
}
// 生成通用外边距样式
@each $size, $value in $margin-sizes {
	.margin-#{$size} {
		margin: $value;
	}
}

// 生成单边外边距样式
@each $position in top, right, bottom, left {
	@each $size, $value in $margin-sizes {
		.margin-#{$position}-#{$size} {
			margin-#{$position}: $value;
		}
	}
}

// 生成左右两边外边距样式
@each $size, $value in $margin-sizes {
	.margin-lr-#{$size} {
		margin-left: $value;
		margin-right: $value;
	}
}

// 生成上下两边外边距样式
@each $size, $value in $margin-sizes {
	.margin-tb-#{$size} {
		margin-top: $value;
		margin-bottom: $value;
	}
}